{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static "admin/css/changelists.css" %}?_=20180905"/>

    {% if cl.formset %}
        <link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}"/>
    {% endif %}
    {% if cl.formset or action_form %}
        <script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
    {% endif %}
    {{ media.css }}
    {% if not actions_on_top and not actions_on_bottom %}
        <style>
            #changelist table thead th:first-child {
                width: inherit
            }
        </style>
    {% endif %}
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    {{ media.js }}
{% endblock %}

{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %}

{% if not is_popup %}
    {% block breadcrumbs %}
        <div class="breadcrumbs">
            <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
            &rsaquo; <a
                href="{% url 'admin:app_list' app_label=cl.opts.app_label %}">{{ cl.opts.app_config.verbose_name }}</a>
            &rsaquo; {{ cl.opts.verbose_name_plural|capfirst }}
        </div>
    {% endblock %}
{% endif %}

{% block coltype %}flex{% endblock %}
{% block content_title %}

{% endblock %}
{% block content %}
    <style>
        #content {
            position: relative;
        }

        .object-tools {
            position: absolute;
            top: 16px;
            right: 20px;
            height: 50px;
            z-index: 2;
        }
        #content-main{
            min-height:30px;
            display: flex;
            padding:10px;
        }
        .object-tools .import_link, .object-tools .export_link {
            color: white !important;
        }

    </style>
    {% block object-tools %}
        <ul class="object-tools">
            {% block object-tools-items %}
                {% if has_add_permission %}
                    {{ block.super }}
                {% endif %}
            {% endblock %}
        </ul>
    {% endblock %}

    <div id="content-main">
        <button type="button" class="el-button el-button--primary" id="id_create_menu"><i class="el-icon-circle-plus-outline"></i><span>创建菜单</span></button>
        <button type="button" class="el-button el-button--primary" id="id_search_menu"><i class="el-icon-search"></i><span>查询菜单</span></button>
        <button type="button" class="el-button el-button--danger" id="id_delete_menu"><i class="el-icon-delete"></i><span>删除菜单</span></button>
        <button type="button" class="el-button el-button--success" id="id_user_list"><i class="el-icon-user"></i><span>获取用户列表</span></button>
    </div>
    <div id="id_menu" style="padding:20px;">

    </div>
    <script type="text/javascript">
        $(function(){
            $("#id_create_menu").click(function () {
                $.ajax({
                  type: 'GET',
                  url: "{% url 'wxchat-create-menu' %}",
                  dataType: 'json',
                  timeout: 5000,
                  success: function(data){
                    console.log(JSON.stringify(data));
                    if(data.errcode === 0) {
                        alert("创建成功")
                    }
                  },
                  error: function(xhr, type,error){
                      console.log(type);
                  }
                });
            });
            $("#id_search_menu").click(function () {
                $.ajax({
                      type: 'GET',
                      url: "{% url 'wxchat-get-menu' %}",
                      dataType: 'json',
                      timeout: 5000,
                      success: function(data){
                        console.log(JSON.stringify(data));
                        if(data != null){
                            $.each(data.menu.button, function (index, item) {
                                $("#id_menu").children('p').remove();
                                $("#id_menu").append('<p>' + item.name + ':' + item.url + '</p>')

                            });
                        }else{
                             $("#id_menu").children('p').remove();
                        }

                      },
                      error: function(xhr, type,error){
                          console.log(type);
                      }
                });
            });
            $("#id_delete_menu").click(function () {
                $.ajax({
                      type: 'GET',
                      url: "{% url 'wxchat-delete-menu' %}",
                      dataType: 'json',
                      timeout: 5000,
                      success: function(data){
                        console.log(JSON.stringify(data));
                        if(data.errcode === 0) {
                            alert("删除成功")
                        }
                      },
                      error: function(xhr, type,error){
                          console.log(type);
                      }
                });
            });

            $("#id_user_list").click(function () {
                $.ajax({
                      type: 'GET',
                      url: "{% url 'wxchat-user-info' %}",
                      dataType: 'json',
                      timeout: 5000,
                      success: function(data){
                        console.log(JSON.stringify(data));
                        if(data.errcode == undefined && data.total >=0){
                            alert("用户数量：" + data.total)
                        }else {
                            alert("获取用户失败")
                        }

                      },
                      error: function(xhr, type,error){
                          console.log(type);
                           alert("获取失败")
                      }
                });
            });

        })
    </script>
{% endblock %}
